<template>
  <div id="info-sort">
    <el-button type="danger" @click="addFirst({type:'addCategoryFirst'})">添加一级分类</el-button>
    <el-row :gutter="30">
      <hr class="hr-e9e9e9" />
      <el-col :span="8">
        <div class="category" v-for=" firstItem in category.item" :key="firstItem.id">
          <h4>
            <svg-icon iconClass="menu"></svg-icon>
            {{firstItem.category_name}}
            <div class="button-group">
              <el-button
                size="mini"
                type="danger"
                round
                @click="editCategory({data:firstItem,type:'editCategoryFirst'})"
              >编辑</el-button>
              <el-button
                size="mini"
                type="success"
                round
                @click="addChldren({data:firstItem,type:'addCategoryChilden'})"
              >添加子集</el-button>
              <el-button size="mini" type round @click="delCategory(firstItem.id)">删除</el-button>
            </div>
          </h4>
          <ul v-if="firstItem.children">
            <li v-for="secondItem in firstItem.children" :key="secondItem.id">
              {{secondItem.category_name}}
              <div class="button-group">
                <el-button size="mini" type="danger" round>编辑</el-button>
                <el-button size="mini" type round>删除</el-button>
              </div>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="16">
        <h4 class="menu-title">一级分类编辑</h4>
        <el-form class="form-wrap" label-width="142px" :model="form" ref="categoryForm">
          <el-form-item label="一级分类名称">
            <el-input v-model="form.categoryName" :disabled="inputFirst"></el-input>
          </el-form-item>
          <el-form-item label="二级分类名称" v-if="category_children_input">
            <el-input v-model="form.secondCategoryName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="submit" :loading="submit_button_loading">确定</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  addFirstCategory,
  GetCategory,
  DelCategory,
  EditCategory,
  AddChildrenCategory
} from "../../api/news";
import { reactive, ref, onMounted, watch } from "@vue/composition-api";
// import { common } from '@/api/common'
export default {
  name: "infoSort",
  setup(prop, { root, refs }) {
    // 数据定义区域
    // 表单数据
    const form = reactive({
      categoryName: "",
      secondCategoryName: ""
    });
    // const {categoryItem,getCategory} = common()
    const category = reactive({
      item: [],
      current: []
    });
    // 二级分类input是否显示
    const category_first_input = ref(true);
    const category_children_input = ref(true);
    const submit_button_loading = ref(false);
    const deleteId = ref("");
    const submitType = ref("");
    const inputFirst = ref(false);
    /* 
    methods定义区域
     */
    const addFirst = params => {
      submitType.value = params.type;
      console.log(submitType.value);
      category_children_input.value = false;
    };
    const submit = () => {
      if (submitType.value === "addCategoryFirst") {
        if (!form.categoryName) {
          root.$message.error("内容不能为空");
          return false;
        }
        submit_button_loading.value = true;
        addFirstCategory({ categoryName: form.categoryName })
          .then(response => {
            let data = response.data;
            if (data.resCode === 0) {
              root.$message.success(data.message);
              category.item.push(data.data);
            }
          })
          .catch(error => {});
        submit_button_loading.value = false;
      }

      if (submitType.value === "editCategoryFirst") {
        editFirstCategory();
      }
      if (submitType.value === "addCategoryChilden") {
        addChildrenCategory();
      }
    };
    // 请求分类数据
    const getCategory = () => {
      root.$store.dispatch("getCategory/GET_CATEGORY_ALL").then(response => {
        let {data:{data}}= response;
        console.log(data);
        category.item = data;
      });
    };
    // 删除一级分类
    const delCategory = categoryId => {
      deleteId.value = categoryId;
      root.confirm({
        content: "是否确认删除",
        fn: isDel,
        catchFn: () => {
          deleteId.value = "";
          root.$message.info("已取消");
        }
      });
    };
    const isDel = () => {
      DelCategory({ categoryId: deleteId.value })
        .then(response => {
          // let index = category.item.findIndex(item => item.id == deleteId.value)
          // category.item.splice(index,1)
          category.item = category.item.filter(
            item => item.id != deleteId.value
          );
          root.$message.success("删除成功");
        })
        .catch(error => {
          console.log(error);
        });
    };
    // 修改一级分类
    const editCategory = params => {
      category_children_input.value = false;
      form.categoryName = params.data.category_name;
      submitType.value = params.type;
      category.current = params.data;
    };
    // 触发接口请求
    const editFirstCategory = () => {
      EditCategory({
        id: category.current.id,
        categoryName: form.categoryName
      })
        .then(response => {
          console.log(response);
          let data = category.item.filter(
            item => item.id == category.current.id
          );
          data[0].category_name = form.categoryName;
          category.current = [];
        })
        .catch(error => {
          console.log(error);
        });
    };
    // 添加子集
    const addChldren = params => {
      submitType.value = params.type;
      inputFirst.value = true;
      category.current = params.data;
      form.categoryName = params.data.category_name;
    };
    const addChildrenCategory = () => {
      let requestData = {
        categoryName: form.secondCategoryName,
        parentId: category.current.id
      };
      console.log(requestData);
      if (!form.secondCategoryName) {
        root.$message.error("名称不能为空");
        return false;
      }
      AddChildrenCategory(requestData).then(response => {
        console.log(response);
      });
    };
    /*
    生命周期 
     */
    onMounted(() => {
      getCategory();
    });
    /*
    watch 
     */
    // watch(()=>categoryItem.item,value=>{
    //   category.item = value
    // })
    return {
      //reactove
      form,
      category,
      // methods
      submit,
      addFirst,
      getCategory,
      delCategory,
      editCategory,
      editFirstCategory,
      addChldren,
      //ref
      category_first_input,
      category_children_input,
      submit_button_loading,
      deleteId,
      submitType,
      inputFirst
    };
  }
};
</script>

<style lang="scss" scoped>
#info-sort {
  margin: 30px 30px;
}

.category:first-child {
  &:before {
    top: 22px;
  }
}
.category:last-child {
  &:before {
    bottom: 22px;
  }
}
.category {
  position: relative;
  line-height: 44px;
  &:before {
    content: "";
    position: absolute;
    width: 32px;
    left: 19px;
    top: 0;
    bottom: 0;
    border-left: 1px dotted #000;
    z-index: 2;
  }

  h4 {
    position: relative;
    padding-left: 40px;
  }
  svg {
    position: absolute;
    left: 13px;
    top: 12px;
  }
  li {
    position: relative;
    padding-left: 40px;
    margin-left: 20px;
    list-style: none;
    &:before {
      content: "";
      position: absolute;
      width: 32px;
      top: 20px;
      left: 0;
      border-bottom: 1px dotted #000;
      z-index: 111;
    }
  }
  li,
  h4 {
    position: relative;
    @include webkit(transition, all 0.5s ease 0s);
    &:hover {
      background-color: #f3f3f3;
      .button-group {
        display: block;
      }
    }
  }
}
.button-group {
  position: absolute;
  z-index: 2;
  right: 11px;
  top: -1px;
  display: none;
  button {
    font-size: 12px;
  }
}
.form-wrap {
  width: 410px;
  padding-top: 26px;
}
.hr-e9e9e9 {
  width: 100%;
  margin: 30px 0;
  border: none;
  border-bottom: 1px solid #e9e9e9;
}
.menu-title {
  background-color: #f3f3f3;
  line-height: 44px;
  padding-left: 30px;
}
</style>